<template>
  <div class="shareContainer" ref="shareContainer">
    <div class="shareheader">
      <div class="shareheader_top">
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px"
            >包装名称</span
          >
          <el-input
            v-model="queryparam.bzname"
            placeholder="名称"
            style="width: 210px; padding: 0px 8px 0px 0px"
          >
          </el-input>
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px">编码</span>
          <el-input
            v-model="queryparam.packageNumber"
            placeholder="编码"
            style="width: 210px; padding: 0px 8px 0px 0px"
          ></el-input>
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px">制造商</span>
          <el-input
            v-model="queryparam.manufacturer"
            placeholder="制造商"
            style="width: 210px; padding: 0px 8px 0px 0px"
          ></el-input>
        </div>
        <div style="min-width: 100px; margin: 5px 10px 18px 0px">
          <el-button
            type="primary"
            icon="el-icon-search"
            data-tracker="P59-1"
            @click="packagingListFn(1, 10)"
            >查询</el-button
          >
          <el-button
            type="primary"
            plain
            icon="el-icon-refresh-left"
            data-tracker="P59-2"
            @click="resultClickFn"
            >重置</el-button
          >
        </div>
      </div>
    </div>
    <div class="sharecontent">
      <!-- 头部内容 -->
      <div class="sharecontent_header">
        <div class="sharecontent_header_right">
          <el-button
            type="primary"
            data-tracker="P59-3"
            @click="handleClick()"
            plain
            style="margin: 0px 10px 10px 0px"
            v-permission="'packaging_create'"
            >新增</el-button
          >
          <el-button
            type="primary"
            data-tracker="P59-4"
            @click="PageDeleteThermomenter()"
            plain
            style="margin: 0px 10px 10px 0px"
            v-permission="'packaging_delete'"
            >删除</el-button
          >
        </div>
        <div class="sharecontent_header_left">
          <el-pagination
            background
            style="margin: 0px 0px 10px 0px"
            small
            :current-page="pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalListNum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div class="sharecontent_content">
        <el-table
          ref="multipleTable"
          :max-height="maxheight"
          :data="tableData"
          border
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" fixed width="55"> </el-table-column>
          <el-table-column
            type="index"
            fixed
            label="序号"
            width="55"
          ></el-table-column>
          <el-table-column fixed prop="number" label="编码" width="180">
          </el-table-column>
          <el-table-column fixed prop="name" label="包装名称" width="220">
          </el-table-column>
          <el-table-column prop="manufacturer" label="制造商" width="320">
          </el-table-column>
          <el-table-column prop="interior" label="内部长" width="200">
          </el-table-column>
          <el-table-column prop="interior_volume" label="内部容积" width="200">
          </el-table-column>
          <el-table-column prop="external" label="外部长" width="200">
          </el-table-column>
          <el-table-column prop="external_volume" label="外部容积" width="200">
          </el-table-column>
          <el-table-column prop="provider" label="提供商" width="320">
          </el-table-column>
          <el-table-column prop="dry_ice" label="干冰" width="200">
          </el-table-column>
          <el-table-column prop="temperature" label="温度" width="200">
          </el-table-column>
          <el-table-column prop="duration" label="持续时间" width="200">
            <template slot-scope="scope">
              {{ scope.row.duration }}小时
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="200">
            <template slot-scope="scope">
              {{
                scope.row.create_time === 0
                  ? ""
                  : new Date(
                      Number(scope.row.create_time) * 1000
                    ).toLocaleString()
              }}
            </template>
          </el-table-column>
          <el-table-column prop="update_time" label="更新时间" width="200">
            <template slot-scope="scope">
              {{
                scope.row.update_time === 0
                  ? ""
                  : new Date(
                      Number(scope.row.update_time) * 1000
                    ).toLocaleString()
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="90">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDetailFn(scope.row)"
                data-tracker="P59-5"
                v-permission="'packaging_detail'"
                >详情</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="handleEditchildren(scope.row)"
                data-tracker="P59-6"
                v-permission="'packaging_update'"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-drawer
      title="新增包装方案"
      :visible.sync="drawervisible"
      :direction="direction"
      :before-close="handleCloseAdd"
      size="45%"
      :wrapperClosable="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="padding: 0 5px"
      >
        <el-form-item label="编码:" prop="packageNumber">
          <el-input
            placeholder="请输入编码"
            v-model="ruleForm.packageNumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="包装名称:" prop="name">
          <el-input
            placeholder="请输入包装名称"
            v-model="ruleForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="制造商:" prop="manufacturer">
          <el-input
            placeholder="请输入制造商"
            v-model="ruleForm.manufacturer"
          ></el-input>
        </el-form-item>
        <el-form-item label="内部尺寸:" prop="Internallength">
          <el-input
            placeholder="长宽高用英文逗号隔开"
            v-model="ruleForm.Internallength"
          ></el-input>
        </el-form-item>
        <el-form-item label="内部容积:" prop="Internalvolume">
          <el-input
            placeholder="请输入内部容积"
            v-model="ruleForm.Internalvolume"
          ></el-input>
        </el-form-item>
        <el-form-item label="外部尺寸:" prop="Externallength">
          <el-input
            placeholder="长宽高用英文逗号隔开"
            v-model="ruleForm.Externallength"
          ></el-input>
        </el-form-item>
        <el-form-item label="外部容积:" prop="Externalvolume">
          <el-input
            placeholder="请输入外部容积"
            v-model="ruleForm.Externalvolume"
          ></el-input>
        </el-form-item>
        <el-form-item label="提供商:" prop="provider">
          <el-input
            placeholder="请输入提供商"
            v-model="ruleForm.provider"
          ></el-input>
        </el-form-item>
        <el-form-item label="干冰:" prop="dry_ice">
          <el-input
            placeholder="请输入干冰"
            v-model="ruleForm.dry_ice"
          ></el-input>
        </el-form-item>
        <el-form-item label="温度:" prop="temperature">
          <el-input
            placeholder="请输入温度"
            v-model="ruleForm.temperature"
          ></el-input>
        </el-form-item>
        <el-form-item label="持续时间:" prop="Duration_time">
          <el-input
            placeholder="请输入持续时间"
            v-model="ruleForm.Duration_time"
            style="width: 130px"
          ></el-input
          ><span>小时</span>
        </el-form-item>
      </el-form>
      <div class="footer_Packag">
        <div style="margin: 0 auto">
          <el-button
            id="orderSave"
            data-tracker="P59-7"
            type="primary"
            plain
            size="mini"
            @click="drawerAddClickFn('ruleForm')"
            >保存</el-button
          >
          <el-button
            id="orderCancel"
            data-tracker="P59-8"
            @click="drawervisible = false"
            >取消</el-button
          >
        </div>
      </div>
    </el-drawer>
    <el-drawer
      title="编辑包装方案"
      :visible.sync="drawerEditvisible"
      :direction="direction"
      :before-close="handleCloseEdit"
      size="45%"
      :wrapperClosable="false"
    >
      <el-form
        :model="ruleFormEdit"
        :rules="rulesEdit"
        ref="ruleFormEdit"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="编码:" prop="packageNumber">
          <el-input
            placeholder="请输入编码"
            v-model="ruleFormEdit.packageNumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="包装名称:" prop="name">
          <el-input
            placeholder="请输入包装名称"
            v-model="ruleFormEdit.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="制造商:" prop="manufacturer">
          <el-input
            placeholder="请输入制造商"
            v-model="ruleFormEdit.manufacturer"
          ></el-input>
        </el-form-item>
        <el-form-item label="内部尺寸:" prop="Internallength">
          <el-input
            placeholder="长宽高用英文逗号隔开"
            v-model="ruleFormEdit.Internallength"
          ></el-input>
        </el-form-item>
        <el-form-item label="内部容积:" prop="Internalvolume">
          <el-input
            placeholder="请输入内部容积"
            v-model="ruleFormEdit.Internalvolume"
          ></el-input>
        </el-form-item>
        <el-form-item label="外部尺寸:" prop="Externallength">
          <el-input
            placeholder="长宽高用英文逗号隔开"
            v-model="ruleFormEdit.Externallength"
          ></el-input>
        </el-form-item>
        <el-form-item label="外部容积:" prop="Externalvolume">
          <el-input
            placeholder="请输入外部容积"
            v-model="ruleFormEdit.Externalvolume"
          ></el-input>
        </el-form-item>
        <el-form-item label="提供商:" prop="provider">
          <el-input
            placeholder="请输入提供商"
            v-model="ruleFormEdit.provider"
          ></el-input>
        </el-form-item>
        <el-form-item label="干冰:" prop="dry_ice">
          <el-input
            placeholder="请输入干冰"
            v-model="ruleFormEdit.dry_ice"
          ></el-input>
        </el-form-item>
        <el-form-item label="温度:" prop="temperature">
          <el-input
            placeholder="请输入温度"
            v-model="ruleFormEdit.temperature"
          ></el-input>
        </el-form-item>
        <el-form-item label="持续时间:" prop="Duration_time">
          <el-input
            placeholder="请输入持续时间"
            v-model="ruleFormEdit.Duration_time"
            style="width: 130px"
          ></el-input
          ><span>小时</span>
        </el-form-item>
      </el-form>
      <div class="footer_Packag">
        <div style="margin: 0 auto">
          <el-button
            id="orderSave"
            data-tracker="P59-9"
            type="primary"
            plain
            size="mini"
            @click="drawerEditClickFn('ruleFormEdit')"
            >保存</el-button
          >
          <el-button
            id="orderCancel"
            data-tracker="P59-10"
            @click="drawerEditvisible = false"
            >取消</el-button
          >
        </div>
      </div>
    </el-drawer>
    <el-drawer
      title="包装方案详情"
      :visible.sync="drawerDetailvisible"
      :direction="direction"
      :before-close="handleCloseDetail"
      size="45%"
      :wrapperClosable="false"
    >
      <el-form
        :model="ruleFormDetail"
        :rules="rulesDetail"
        ref="ruleFormDetail"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="编码:" prop="packageNumber">
          <el-input
            placeholder="请输入编码"
            v-model="ruleFormDetail.packageNumber"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="包装名称:" prop="name">
          <el-input
            placeholder="请输入包装名称"
            v-model="ruleFormDetail.name"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="制造商:" prop="manufacturer">
          <el-input
            placeholder="请输入制造商"
            v-model="ruleFormDetail.manufacturer"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="内部尺寸:" prop="Internallength">
          <el-input
            placeholder="长宽高用英文逗号隔开"
            v-model="ruleFormDetail.Internallength"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="内部容积:" prop="Internalvolume">
          <el-input
            placeholder="请输入内部容积"
            v-model="ruleFormDetail.Internalvolume"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="外部尺寸:" prop="Externallength">
          <el-input
            placeholder="长宽高用英文逗号隔开"
            v-model="ruleFormDetail.Externallength"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="外部容积:" prop="Externalvolume">
          <el-input
            placeholder="请输入外部容积"
            v-model="ruleFormDetail.Externalvolume"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="提供商:" prop="provider">
          <el-input
            placeholder="请输入提供商"
            v-model="ruleFormDetail.provider"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="干冰:" prop="dry_ice">
          <el-input
            placeholder="请输入干冰"
            v-model="ruleFormDetail.dry_ice"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="温度:" prop="temperature">
          <el-input
            placeholder="请输入温度"
            v-model="ruleFormDetail.temperature"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="持续时间:" prop="Duration_time">
          <el-input
            placeholder="请输入持续时间"
            v-model="ruleFormDetail.Duration_time"
            disabled
            style="width: 130px"
          ></el-input
          ><span>小时</span>
        </el-form-item>
        <el-form-item label="创建时间:" prop="create_time">
          <el-date-picker
            v-model="ruleFormDetail.create_time"
            type="datetime"
            disabled
            value-format="timestamp"
            placeholder="选择日期时间"
            default-time="12:00:00"
            :default-value="new Date()"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="更新时间:" prop="update_time">
          <el-date-picker
            v-model="ruleFormDetail.update_time"
            type="datetime"
            disabled
            value-format="timestamp"
            placeholder="选择日期时间"
            default-time="12:00:00"
            :default-value="new Date()"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import {
  packagingList,
  packagingCreate,
  packagingDetail,
  packagingUpdate,
  packagingDelete,
} from "@/api/packagingscheme";
export default {
  data() {
    return {
      drawervisible: false,
      drawerEditvisible: false,
      drawerDetailvisible: false,
      direction: "rtl",
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 20, //一页多少条
      maxheight: "auto",
      queryparam: {
        bzname: "",
        packageNumber: "",
        manufacturer: "",
      },
      ruleForm: {
        packageNumber: "",
        name: "",
        manufacturer: "",
        Internallength: "",
        Internalvolume: "",
        Externallength: "",
        Externalvolume: "",
        provider: "",
        dry_ice: "",
        temperature: "",
        Duration_time: "",
      },
      rules: {
        packageNumber: [
          { required: true, message: "请输入编码", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入包装方案名称", trigger: "blur" },
        ],
      },
      ruleFormEdit: {
        packageNumber: "",
        name: "",
        manufacturer: "",
        Internallength: "",
        Internalvolume: "",
        Externallength: "",
        Externalvolume: "",
        provider: "",
        dry_ice: "",
        temperature: "",
        Duration_time: "",
      },
      rulesEdit: {
        packageNumber: [
          { required: true, message: "请输入编码", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入包装方案名称", trigger: "blur" },
        ],
      },
      ruleFormDetail: {
        packageNumber: "",
        name: "",
        manufacturer: "",
        Internallength: "",
        Internalvolume: "",
        Externallength: "",
        Externalvolume: "",
        provider: "",
        dry_ice: "",
        temperature: "",
        Duration_time: "",
        create_time: "",
        update_time: "",
      },
      rulesDetail: {
        packageNumber: [
          { required: true, message: "请输入编码", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入包装方案名称", trigger: "blur" },
        ],
      },
      multipleSelection: [],
      tableData: [],
      editDataId: "",
      orderIdNums: [],
    };
  },
  components: {},
  mounted() {
    this.packagingListFn(1, 10);
  },
  methods: {
    //重置按钮函数
    resultClickFn() {
      this.queryparam.bzname = "";
      this.queryparam.packageNumber = "";
      this.queryparam.manufacturer = "";
      this.packagingListFn(this.pageNum, this.pageSize);
    },
    //获取选中的ID
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val.length > 0) {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          this.orderIdNums = this.multipleSelection.map((item) =>
            Number(item.id)
          );
        }
      } else {
        this.orderIdNums = [];
      }
    },
    //新增包装方案
    handleClick() {
      this.drawervisible = true;
      this.ruleForm.packageNumber = "";
      this.ruleForm.name = "";
      this.ruleForm.manufacturer = "";
      this.ruleForm.Internallength = "";
      this.ruleForm.Internalvolume = "";
      this.ruleForm.Externallength = "";
      this.ruleForm.Externalvolume = "";
      this.ruleForm.provider = "";
      this.ruleForm.dry_ice = "";
      this.ruleForm.temperature = "";
      this.ruleForm.Duration_time = "";
    },
    //关闭新增弹窗
    handleCloseAdd() {
      this.drawervisible = false;
      this.ruleForm.packageNumber = "";
      this.ruleForm.name = "";
      this.ruleForm.manufacturer = "";
      this.ruleForm.Internallength = "";
      this.ruleForm.Internalvolume = "";
      this.ruleForm.Externallength = "";
      this.ruleForm.Externalvolume = "";
      this.ruleForm.provider = "";
      this.ruleForm.dry_ice = "";
      this.ruleForm.temperature = "";
      this.ruleForm.Duration_time = "";
    },
    //新增包装方案 确定函数
    drawerAddClickFn(formName) {
      let data = {
        name: this.ruleForm.name,
        number: this.ruleForm.packageNumber,
        manufacturer: this.ruleForm.manufacturer,
        interior: this.ruleForm.Internallength,
        interior_volume: this.ruleForm.Internalvolume,
        external: this.ruleForm.Externallength,
        external_volume: this.ruleForm.Externalvolume,
        provider: this.ruleForm.provider,
        dry_ice: this.ruleForm.dry_ice,
        temperature: this.ruleForm.temperature,
        duration: this.ruleForm.Duration_time + "",
      };
      this.$refs[formName].validate((valid) => {
        if (valid) {
          packagingCreate(data).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "创建包装方案成功",
                type: "success",
              });
              this.packagingListFn(this.pageNum, this.pageSize);
              this.drawervisible = false;
            }
          });
        } else {
          return false;
        }
      });
    },
    //编辑包装方案
    handleEditchildren(val) {
      this.drawerEditvisible = true;
      this.editDataId = val.id;
      let data = {
        id: val.id,
      };
      packagingDetail(data).then((res) => {
        if (res.code === 10000) {
          this.ruleFormEdit.packageNumber = res.data.number;
          this.ruleFormEdit.name = res.data.name;
          this.ruleFormEdit.manufacturer = res.data.manufacturer;
          this.ruleFormEdit.Internallength = res.data.interior;
          this.ruleFormEdit.Internalvolume = res.data.interior_volume;
          this.ruleFormEdit.Externallength = res.data.external;
          this.ruleFormEdit.Externalvolume = res.data.external_volume;
          this.ruleFormEdit.provider = res.data.provider;
          this.ruleFormEdit.dry_ice = res.data.dry_ice;
          this.ruleFormEdit.temperature = res.data.temperature;
          this.ruleFormEdit.Duration_time = res.data.duration;
        }
      });
    },
    //关闭编辑弹窗
    handleCloseEdit() {
      this.drawerEditvisible = false;
    },
    //编辑包装方案 确定函数
    drawerEditClickFn(formName) {
      let data = {
        id: this.editDataId,
        name: this.ruleFormEdit.name,
        number: this.ruleFormEdit.packageNumber,
        manufacturer: this.ruleFormEdit.manufacturer,
        interior: this.ruleFormEdit.Internallength,
        interior_volume: this.ruleFormEdit.Internalvolume,
        external: this.ruleFormEdit.Externallength,
        external_volume: this.ruleFormEdit.Externalvolume,
        provider: this.ruleFormEdit.provider,
        dry_ice: this.ruleFormEdit.dry_ice,
        temperature: this.ruleFormEdit.temperature,
        duration: this.ruleFormEdit.Duration_time + "",
      };
      this.$refs[formName].validate((valid) => {
        if (valid) {
          packagingUpdate(data).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "创建包装方案成功",
                type: "success",
              });
              this.packagingListFn(this.pageNum, this.pageSize);
              this.drawerEditvisible = false;
            }
          });
        } else {
          return false;
        }
      });
    },
    //包装方案详情
    handleDetailFn(val) {
      this.drawerDetailvisible = true;
      let data = {
        id: val.id,
      };
      packagingDetail(data).then((res) => {
        if (res.code === 10000) {
          this.ruleFormDetail.packageNumber = res.data.number;
          this.ruleFormDetail.name = res.data.name;
          this.ruleFormDetail.manufacturer = res.data.manufacturer;
          this.ruleFormDetail.Internallength = res.data.interior;
          this.ruleFormDetail.Internalvolume = res.data.interior_volume;
          this.ruleFormDetail.Externallength = res.data.external;
          this.ruleFormDetail.Externalvolume = res.data.external_volume;
          this.ruleFormDetail.provider = res.data.provider;
          this.ruleFormDetail.dry_ice = res.data.dry_ice;
          this.ruleFormDetail.temperature = res.data.temperature;
          this.ruleFormDetail.Duration_time = res.data.duration;
          this.ruleFormDetail.create_time = res.data.create_time * 1000;
          this.ruleFormDetail.update_time = res.data.update_time * 1000;
        }
      });
    },
    //关闭包装方案详情详情
    handleCloseDetail() {
      this.drawerDetailvisible = false;
    },
    //批量删除按钮操作
    PageDeleteThermomenter() {
      const data = {
        id_list: this.orderIdNums,
      };
      if (this.multipleSelection.length > 0) {
        packagingDelete(data).then((res) => {
          if (res.code === 10000) {
            this.$message({
              message: "删除包装方案成功",
              type: "success",
            });
            this.packagingListFn(this.pageNum, this.pageSize);
          }
        });
      } else {
        this.$message({
          message: "请至少勾选一条数据进行删除",
          type: "warning",
        });
      }
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.packagingListFn(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.packagingListFn(this.pageNum, this.pageSize);
    },
    //list列表API
    packagingListFn(pageNumval, pageSizeval) {
      let data = {
        page: pageNumval,
        page_size: pageSizeval,
        name: this.queryparam.bzname,
        number: this.queryparam.packageNumber,
        manufacturer: this.queryparam.manufacturer,
      };
      packagingList(data).then((res) => {
        if (res.code === 10000 && res.data.list !== null) {
          this.tableData = res.data.list;
          if (this.tableData.length > 6) {
            //两排操作栏
            this.maxheight = document.documentElement.clientHeight - 265;
          } else {
            this.maxheight = "auto";
          }
          this.pageNum = res.data.page;
          this.totalListNum = res.data.total;
          this.pageSize = res.data.page_size;
        } else {
          this.tableData = [];
          this.pageNum = 1;
          this.totalListNum = 0;
          this.pageSize = 20;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-form-item {
  float: left;
  margin: 10px 5px;
}
.shareContainer {
  padding: 10px 15px;
  background-color: #fff;

  .shareheader {
    background: white;

    .shareheader_top {
      display: flex;
      flex-wrap: wrap;
    }
  }

  // 内容
  .sharecontent {
    background: white;
    // 头部内容
    .sharecontent_header {
      .sharecontent_header_right {
        display: inline-block;
      }

      .sharecontent_header_left {
        float: right;
        padding: 0px 8px 0px 0px;
      }
    }
  }
  .footer_Packag {
    position: fixed;
    bottom: 30px;
    right: 15%;
  }
}
</style>
